<template >
    <div id="abody">
        <div class="login-container">
        <h2>物联网平台登录</h2>
        <form  method="post">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username"  v-model="username" required>
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" v-model="password" required>
            </div>

            
            <div class="form-group">
                <label for="password">手机号:</label>
                <div class="phoneNumber">
                    <input type="password" id="phoneNumber" name="password" v-model="phoneNumber" required>
                    <input type="button" value="发送" @click.prevent="sendMsg(phoneNumber)">
                </div>
            </div>
            <div class="form-group">
                <label for="code">验证码:</label>
                <input type="password" id="code" name="code" v-model="code" required>
            </div>
            <div class="form-group">
                <div class="code1">
                    <input type="checkbox" class="ck"  name="rememberMe" id="rememberMe">
                    <span>记住我</span>
                </div>
            </div>

            <div class="form-group">
                <input type="submit"  value="注册" @click.prevent="this.$router.push('/register')">
                <input type="submit"  value="登录" @click.prevent="login">
            </div>
        </form>
    </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "Login",
    data(){
        return {
          username:"test",
          password:"123456",
          phoneNumber:"",
          code:"",
          rememberMe:false
        }
    },
    methods: {
      login() {
        // 处理登录逻辑
        this.$axios({
            url: 'tenant/login',
            method: 'post',
            data: {
              username: this.username,
              password: this.password,
              phoneNumber: this.phoneNumber,
              code: this.code
            }
        }).then(res => {
            // sessionStorage.setItem("username",this.username)
            sessionStorage.setItem("token",res.data)
            this.$router.push("/IoT");   
        })
      },
      sendMsg(phoneNumber) {
        this.$axios({
            url: 'SendMsg/'+phoneNumber,
            method: 'post'
          }).then(res => {
                // console.log(res);
          })
        
      }
    }
  }
  </script>
  
  <style scoped>
  /* 可在此添加你的样式内容 */
  #abody{
    font-family: 'Arial', sans-serif;
    background-color: #f7f7f7;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .login-container {
    background-color: #fff;
    padding: 40px 60px 40px 40px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-container h2 {
    text-align: center;
    margin-bottom: 20px;
}
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
}
.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.form-group input[type="submit"] {
    width: 180px;
    margin:auto 20px;
    background-color: #5cb85c;
    color: white;
    cursor: pointer;
}
.form-group input[type="submit"]:hover {
    background-color: #4cae4c;
}
.code{
    display: flex;
}
.code img{
    margin-left: 20px;
    width: 120px;
    height: 35px;
}

.code1{
    display: flex;
    align-items: center;
}
.code1 .ck{
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
  </style>